<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <custom-form @submit="onCFSubmit"></custom-form>
    </div>

    <script>
        const app = Vue.createApp({
            methods: {
                onCFSubmit(payload) {
                    console.log("onCFSubmit", payload);
                }
            }
        })

        app.component('custom-form', {
            template: `
            <form @submit.prevent="submitForm">
                <input type="text" v-model="email">
                <input type="text" v-model="password">
                <button>submit</button>
            </form>
            `,
            data() {
                return {
                    email: "",
                    password: ""
                }
            },
            emits: {
                // 没有验证
                click: null,

                // 验证 submit 事件 入参为事件携带的载荷 valid validate validator validation invalid invalidate invalidator invalidation
                submit: ({ email, password }) => {
                    if (email && password) {
                        // 验证通过 一切好端端
                        return true
                    } else {
                        // 验证未通过 系统会抛出警告 但也仅仅只是一个警告 父组件依然能正常滴接收和处理自定义事件
                        // console.warn('有一只傻鸟传递在自定义事件submit中传递了错误的载荷')
                        return false
                    }
                }
            },
            methods: {
                submitForm() {
                    console.log("submitForm");
                    // 在发送自定义事件时 框架会先调用该事件的校验方法
                    this.$emit('submit', { email:this.email, password:this.password })
                }
            }
        })

        app.mount('#app')
    </script>
</body>

</html>